<template>
  <v-app>
    <v-container>
      <v-select
        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
        label="Country"
      />
      <pre>
      [role="combobox"]: {{ n1 }}
      [aria-controls]: {{ n2 }}
      [aria-expanded]: {{ n3 }}
      </pre>
    </v-container>
  </v-app>
</template>

<script setup>
  import { nextTick, onMounted, ref } from 'vue'
  const n1 = ref(0)
  const n2 = ref(0)
  const n3 = ref(0)
  onMounted(async () => {
    await nextTick()
    n1.value = document.querySelectorAll('[role="combobox"]').length
    n2.value = document.querySelectorAll('[aria-controls]').length
    n3.value = document.querySelectorAll('[aria-expanded]').length
  })
</script>